<template>
	<view class="container">
		<view class="header">
			<text class="title">我的录音任务</text>
			<view class="progress-info" v-if="!loading">
				<text class="progress-text">进度：{{ progressData.completed || 0 }}/{{ progressData.total || 0 }}</text>
				<view class="progress-bar">
					<view class="progress-fill" :style="{width: (progressData.completion_rate || 0) + '%'}"></view>
				</view>
			</view>
		</view>

		<view class="loading" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>

		<view class="sentence-list" v-else>
			<view class="sentence-item"
				v-for="(item, index) in sentenceList"
				:key="item.id"
				:class="{'completed': item.is_completed, 'current': !item.is_completed && isCurrentSentence(item)}"
				@click="goToRecord(item)">
				<view class="sentence-content">
					<view class="sentence-order">{{ item.sequence_order }}</view>
					<text class="sentence-text">{{ item.content }}</text>
					<view class="sentence-status">
						<text v-if="item.is_completed" class="status-completed">✓ 已完成</text>
						<text v-else-if="isCurrentSentence(item)" class="status-current">当前任务</text>
						<text v-else class="status-pending">待录制</text>
					</view>
				</view>
				<text class="arrow-icon">></text>
			</view>
		</view>

		<view class="empty-tip" v-if="!loading && sentenceList.length === 0">
			<text>暂无录音任务，请联系管理员分配</text>
		</view>

		<!-- 录音注意事项弹窗 -->
		<view class="modal-overlay" v-if="showNoticeModal" @click="closeNoticeModal">
			<view class="notice-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">录音注意事项</text>
				</view>
				<view class="modal-content">
					<text class="notice-item">1. 请在安静的环境下录音</text>
					<text class="notice-item">2. 请保持与手机适当距离（20-30cm）</text>
					<text class="notice-item">3. 请用标准普通话清晰朗读</text>
					<text class="notice-item">4. 录音前请先熟悉句子内容</text>
					<text class="notice-item">5. 录音完成后请试听确认质量</text>
					<text class="notice-item">6. 请按顺序完成所有分配的句子</text>
				</view>
				<view class="modal-footer">
					<button class="confirm-btn" @click="closeNoticeModal">我知道了</button>
				</view>
			</view>
		</view>

		<view class="pattern-decoration top-left"></view>
		<view class="pattern-decoration top-right"></view>
	</view>
</template>

<script>
	import { sentenceAPI } from '../../utils/api.js';

	export default {
		data() {
			return {
				sentenceList: [],
				progressData: {
					completed: 0,
					total: 0,
					completion_rate: 0
				},
				loading: false,
				showNoticeModal: false
			}
		},
		onLoad() {
			this.showNoticeModal = true; // 进入页面就显示注意事项
			this.getAssignedSentences();
		},
		methods: {
			// 获取用户分配的句子列表
			getAssignedSentences() {
				this.loading = true;
				console.log('开始获取分配的句子列表...');

				sentenceAPI.getAssignedSentences()
					.then(res => {
						console.log('获取分配句子列表成功:', res);
						if (res.code === 200) {
							this.sentenceList = res.data.sentences || [];
							// 同时设置进度数据
							this.progressData = {
								completed: res.data.completed || 0,
								total: res.data.total || 0,
								completion_rate: res.data.completion_rate || 0
							};
							console.log('设置分配句子列表数据:', this.sentenceList);
							console.log('设置进度数据:', this.progressData);
						} else {
							console.error('获取分配句子列表失败，错误码:', res.code, '错误信息:', res.message);
							uni.showToast({
								title: res.message || '获取任务列表失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						console.error('获取分配句子列表失败:', err);
						uni.showToast({
							title: '获取任务列表失败',
							icon: 'none'
						});
					})
					.finally(() => {
						this.loading = false;
						console.log('分配句子列表加载完成');
					});
			},

			// 判断是否是当前要录制的句子
			isCurrentSentence(item) {
				// 找到第一个未完成的句子作为当前句子
				if (item.is_completed) {
					return false;
				}

				// 检查是否是第一个未完成的句子
				const uncompletedSentences = this.sentenceList.filter(s => !s.is_completed);
				if (uncompletedSentences.length > 0) {
					return item.id === uncompletedSentences[0].id;
				}

				return false;
			},

			// 关闭注意事项弹窗
			closeNoticeModal() {
				this.showNoticeModal = false;
			},

			goToRecord(item) {
				// 检查是否可以录制这个句子
				if (item.is_completed) {
					// 已完成的句子，可以查看和重新录制
					uni.navigateTo({
						url: `/pages/record/record?id=${item.id}&content=${encodeURIComponent(item.content)}&order=${item.sequence_order}&total=${this.progressData.total}`
					});
				} else if (this.isCurrentSentence(item)) {
					// 当前要录制的句子
					uni.navigateTo({
						url: `/pages/record/record?id=${item.id}&content=${encodeURIComponent(item.content)}&order=${item.sequence_order}&total=${this.progressData.total}`
					});
				} else {
					// 还未到录制顺序的句子
					uni.showToast({
						title: '请按顺序录制句子',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		min-height: 100vh;
		background-color: #D3E0F3; // 淡青色背景
		padding: 30rpx;
		padding-bottom: 120rpx; // 为底部导航留出空间
	}
	
	.header {
		padding: 20rpx 0;
		margin-bottom: 30rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #7397AB; // 淡蓝色文字
			text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;
			display: block;
			text-align: center;
		}

		.progress-info {
			margin-top: 20rpx;

			.progress-text {
				font-size: 28rpx;
				color: #7397AB;
				text-align: center;
				display: block;
				margin-bottom: 15rpx;
			}

			.progress-bar {
				height: 12rpx;
				background-color: rgba(255, 255, 255, 0.8);
				border-radius: 6rpx;
				overflow: hidden;

				.progress-fill {
					height: 100%;
					background: linear-gradient(90deg, #7397AB, #A8C0D1);
					border-radius: 6rpx;
					transition: width 0.3s ease;
				}
			}
		}
	}
	
	.loading {
		text-align: center;
		padding: 50rpx 0;
		
		.loading-text {
			color: #7397AB;
			font-size: 32rpx;
		}
	}
	
	.sentence-list {
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		border: 3rpx solid #D1D9E0; // 淡灰蓝色边框
	}
	
	.sentence-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.95);
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;

		&:last-child {
			border-bottom: none;
		}

		&.completed {
			background-color: rgba(115, 151, 171, 0.1);

			.sentence-text {
				color: #666;
			}
		}

		&.current {
			background-color: rgba(115, 151, 171, 0.2);
			border-left: 8rpx solid #7397AB;
		}

		.sentence-content {
			flex: 1;
			display: flex;
			align-items: center;

			.sentence-order {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background-color: #7397AB;
				color: white;
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.sentence-text {
				font-size: 30rpx;
				color: #333;
				flex: 1;
				line-height: 1.4;
			}

			.sentence-status {
				margin-left: 20rpx;
				flex-shrink: 0;

				.status-completed {
					color: #52c41a;
					font-size: 24rpx;
					font-weight: bold;
				}

				.status-current {
					color: #1890ff;
					font-size: 24rpx;
					font-weight: bold;
				}

				.status-pending {
					color: #999;
					font-size: 24rpx;
				}
			}
		}

		.arrow-icon {
			color: #999;
			font-size: 36rpx;
			margin-left: 20rpx;
		}
	}
	
	.empty-tip {
		text-align: center;
		padding: 100rpx 0;
		color: #7397AB; // 淡蓝色文字
		font-size: 32rpx;
		background-color: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		border: 3rpx solid #D1D9E0; // 淡灰蓝色边框
	}
	
	// 新疆传统花纹装饰
	.pattern-decoration {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		background-image: radial-gradient(circle, #7397AB 10%, transparent 30%),
						  radial-gradient(circle, #7397AB 10%, transparent 30%);
		background-size: 40rpx 40rpx;
		background-position: 0 0, 20rpx 20rpx;
		opacity: 0.5;
		z-index: -1;
	}
	
	.top-left {
		top: 20rpx;
		left: 20rpx;
	}
	
	.top-right {
		top: 20rpx;
		right: 20rpx;
		transform: rotate(90deg);
	}

	// 弹窗样式
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.notice-modal {
		width: 600rpx;
		background-color: white;
		border-radius: 20rpx;
		overflow: hidden;

		.modal-header {
			background-color: #7397AB;
			padding: 30rpx;
			text-align: center;

			.modal-title {
				color: white;
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.modal-content {
			padding: 40rpx 30rpx;

			.notice-item {
				display: block;
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				position: relative;

				&:before {
					content: '•';
					color: #7397AB;
					font-weight: bold;
					position: absolute;
					left: 0;
				}
			}
		}

		.modal-footer {
			padding: 0 30rpx 30rpx;

			.confirm-btn {
				width: 100%;
				height: 80rpx;
				background: linear-gradient(135deg, #7397AB, #A8C0D1);
				color: white;
				border: none;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
</style>
